<template>
    <div>
       <yh-dialog drag title="确认导出计算因子信息" :visible.sync="visibleTemp" width="500px" @close="closeModal" :close-on-click-modal="false">
            <div>
                <div>
                    <el-checkbox checked disabled>主表</el-checkbox>
                    <el-checkbox v-model="exportType" true-label="1" false-label="0">关系表</el-checkbox>
                    <el-checkbox v-model="dataSourceType" true-label="1" false-label="0">数据源配置表</el-checkbox>
                    <el-checkbox v-model="calLogicType" true-label="1" false-label="0">计算逻辑说明表</el-checkbox>
                </div>
            </div>
            <div style="margin: 10px 0"></div>
            <div v-if="list.length">
                <el-table :data="list" style="width: 100%;" height="250px" size="mini" border>
                    <el-table-column prop="boundCode" label="配置序号"> </el-table-column>
                    <el-table-column prop="boundName" label="范围名称" show-overflow-tooltip> </el-table-column>
                </el-table>
            </div>
            <div v-else style="color: red">导出全部数据</div>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="closeModal">取 消</el-button>
                <el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
            </div>
       </yh-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, PropSync, Vue, Watch } from 'vue-property-decorator';
import { exportOriginalBoundToSql } from '@/pages/quota/api';

@Component({ name: 'RangeIndicatorsExportsql' })
export default class RangeIndicatorsExportsql extends Vue {
    @PropSync('visible') syncVisible: boolean;
    @Prop({ default: () => [] }) list: any[];

    private visibleTemp = false;
    private exportType = '0';
    private dataSourceType = '0';
    private calLogicType = '0';

    @Watch('visible')
    onWatchVisible(value) {
        if (value !== this.visibleTemp) {
            this.visibleTemp = value;
        }
    }

    // 关闭弹窗
    closeModal() {
        this.syncVisible = false;
    }

    onSubmit() {
        const data = {
            exportType: this.exportType,
            dataSourceType: this.dataSourceType,
            calLogicType: this.calLogicType,
            codes: this.list.map(item => item.key),
        }
        exportOriginalBoundToSql(data);
        this.$emit('on-submit');
        this.closeModal();
    }
}
</script>
